<template>
	<div class="cs-container">
		<!-- <div class="cs-title clear">
			<div class="left">vue技术栈 - 单文件组件</div>
			<div class="right">
				<a href="https://javascript.ruanyifeng.com/" target="_blank">JavaScript 标准参考教程</a>
			</div>
		</div> -->
		<div class="cs-content">
			<div class="default-shadow" style="background: white;padding: 5px 20px;" >
				<el-row>
					<div style="font-size: 20px;">
						<count-to :startVal="1" :endVal="result" :delay="500" ></count-to>
					</div>
					<h3>基础</h3>
					<el-button type="primary" size="mini" @click="jump('https://cn.vuejs.org/')" title="Vue.js">Vue.js</el-button>
					<el-button type="primary" size="mini" @click="jump('https://router.vuejs.org/zh/')">Vue-Router</el-button>
					<el-button type="primary" size="mini"  @click="jump('https://vuex.vuejs.org/zh/')">Vuex</el-button>
					<el-button type="primary" size="mini" @click="jump('https://cli.vuejs.org/zh/')" title="帮助用户快速开发 Vue 的脚手架(scaffold)">  vue-cli</el-button>
					<el-button type="primary" size="mini" @click="jump('https://cn.vuejs.org/v2/guide/components.html')">component</el-button>
					<el-button type="primary" size="mini" @click="jump('http://www.axios-js.com/zh-cn')" title="Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中">axios</el-button>
					<el-button v-show="false" size="mini" type="primary" @click="jump('https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise')" title="constructor">Promise</el-button>
					<el-button type="primary" size="mini" @click="jump('https://es6.ruanyifeng.com/')">ECMAScript 6</el-button>
					<el-button type="primary" size="mini" @click="jump('https://zh.javascript.info/')">现代 JavaScript 教程</el-button>
					<el-button type="primary" size="mini" @click="jump('https://www.tslang.cn/')" title="TypeScript是JavaScript类型的超集，它可以编译成纯JavaScript。">TypeScript</el-button>
				
				</el-row>
				<el-row>
					<h3>CSS预编译器</h3>
					<el-button type="warning" size="mini" @click="jump('https://less.bootcss.com/')" title="Less 是 CSS 预处理语言，使 CSS 更易维护和扩展">less</el-button>
					<el-button type="warning" size="mini" @click="jump('https://sass.bootcss.com/')" title="Sass 是 CSS 的一个扩展，它使 CSS 的使用起来更加优雅和强大。">sass</el-button>
					<el-button type="warning" size="mini" @click="jump('https://www.sass.hk/')" title="scss是sass的一个升级版本，完全兼容sass之前的功能，又有了些新增能力。">scss</el-button>
					<el-button type="warning" size="mini" @click="jump('https://www.stylus-lang.cn/')" title="富有表现力、动态、健壮的 CSS">stylus</el-button>
					<el-button type="warning" size="mini" @click="jump('http://postcss.docschina.org/')" title="通过 JavaScript 来转换 CSS，并且提供强大的插件系统">PostCSS</el-button>
				</el-row>
				<el-row>
					<h3>进阶/JavaScript运行环境/包管理工具/编译构建工具/代码风格</h3>
					<el-button type="info" size="mini" @click="jump('https://javascript.ruanyifeng.com/nodejs/packagejson.html')"
						title="package.json文件会描述这个NPM包的所有相关信息，包括作者、简介、包依赖、构建等信息，格式是严格的JSON格式">package.json</el-button>
					<el-tooltip class="item" effect="dark" content="Node.js® 是一个基于 Chrome V8 引擎 的 JavaScript 运行时环境" placement="top-start">
						<el-button type="info" size="mini" @click="jump('https://nodejs.org/zh-cn/')">Node.js</el-button>
					</el-tooltip>
					<el-button type="info" size="mini" @click="jump('http://caibaojian.com/npm/')" title="npm 是 JavaScript package 管理工具，在这里可以找到可复用代码，并以强大的全新方式进行聚合">npm</el-button>
					<el-button type="info" size="mini" @click="jump('https://yarn.bootcss.com/docs/')" title="Yarn 对你的代码来说是一个包管理器。它可以让你使用并分享 全世界开发者的（例如 JavaScript）代码">yarn</el-button>
					<el-button type="info" size="mini" @click="jump('https://webpack.docschina.org/')" title="webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具">webpack</el-button>
					<el-button type="info" size="mini" @click="jump('https://www.gulpjs.com.cn/docs/getting-started/quick-start/')">gulp</el-button>
					<el-button type="info" size="mini" @click="jump('https://grunt.docschina.org/')">grunt</el-button>
					<el-button type="info" size="mini" @click="jump('https://www.babeljs.cn/')" title="babel is a javascript compiler">babel</el-button>
					
					<el-button type="info" size="mini" @click="jump('https://cn.eslint.org/')" title="javascript代码检测工具">ESlint</el-button>
					<el-button type="info" size="mini" @click="jump('https://stylelint.docschina.org/')" title="个强大的，现代的代码检查工具">stylelint</el-button>
					<el-button type="info" size="mini" @click="jump('https://developer.mozilla.org/zh-CN/docs/Glossary/polyfill')" 
						title="Polyfill 是一块代码（通常是 Web 上的 JavaScript），用来为旧浏览器提供它没有原生支持的较新的功能。">polyfills</el-button>
					<el-button type="info" size="mini" @click="jump('https://www.shouce.ren/api/view/a/13232')" title="JSDoc是一个根据javascript文件中注释信息，生成JavaScript应用程序或库、模块的API文档 的工具。">JSDoc</el-button>
					
					<el-button type="info" size="mini" @click="jump('https://www.itying.com/koa/article-index-id-90.html')" 
						title="基于 Node.js 平台的下一代 web 开发框架。">Koa2</el-button>
					
				</el-row>
				<el-row>
					<h3>高级</h3>
					<el-button type="danger" size="mini" @click="jump('https://blog.csdn.net/qq_30638831/article/details/90552912')">V8引擎</el-button>
					<el-button type="danger" size="mini" @click="jump('https://github.com/v8/v8')">V8 JavaScript Engine</el-button>
					<el-button type="danger" size="mini" @click="jump('https://www.jianshu.com/p/d0d40d2eb17a')">运行时(Runtime)</el-button>
					<el-button type="danger" size="mini" @click="jump('https://segmentfault.com/a/1190000022511727')">浏览器工作机制</el-button>
					<el-button type="danger" size="mini"
						title=" JS事件循环(Event Loop)机制"
						@click="jump('http://www.atguigu.com/mst/html/gp/17651.html')">Event Loop</el-button>
					<el-button type="danger" size="mini"
						title="1.语法分析  2.预编译  3.解释执行"
						@click="jump('https://zhuanlan.zhihu.com/p/50236805')">JavaScript预编译</el-button>
					<el-button type="danger" size="mini"
						title="链式结构"
						@click="jump('https://www.cnblogs.com/loveyaxin/p/11151586.html')">原型与原型链</el-button>
					<el-button type="danger" size="mini"
						title="链式结构"
						@click="jump('https://www.cnblogs.com/fundebug/p/10535230.html')">作用域与作用域链</el-button>
				</el-row>
				<el-row>
					<h3>HTTP(超文本传输协议)</h3>
					<el-button type="danger" size="mini" @click="jump('https://blog.csdn.net/zlczsw/article/details/91046081')">get请求和post请求的区别</el-button>
					<el-button type="danger" size="mini" @click="jump('https://baike.baidu.com/item/%E7%BD%91%E7%BB%9C%E5%8D%8F%E8%AE%AE')">网络协议</el-button>
				</el-row>
				<el-row>
					<h3>UI框架</h3>
					<el-button type="success" size="mini" @click="jump('https://element.eleme.cn/#/zh-CN/component/installation')">Element</el-button>
					<el-button type="success" size="mini" @click="jump('https://element-plus.gitee.io/zh-CN/component/button.html')">Element Plus</el-button>
					<el-button type="success" size="mini" @click="jump('https://1x.antdv.com/docs/vue/introduce-cn/')">Ant Design Vue</el-button>
					<el-button type="success" size="mini" @click="jump('http://iview.talkingdata.com/#/components/guide/install')">iview ui</el-button>
					<el-button type="success" size="mini" @click="jump('https://vant-contrib.gitee.io/vant/#/zh-CN')">Vant</el-button>
				</el-row>
				<el-row>
					<h3>vue中常用的插件</h3>
					<el-button  type="primary" size="mini" @click="jump('http://mockjs.com/')">mockjs</el-button>
					<el-button  type="primary" size="mini" @click="jump('https://github.com/pvorb/node-md5')">md5</el-button>
					<el-button  type="primary" size="mini" @click="jump('https://www.npmjs.com/package/js-cookie')">js-cookie</el-button>
					<el-button  type="primary" size="mini" @click="jump('http://momentjs.cn/')" title="http://momentjs.cn/timezone/">moment</el-button>
				</el-row>
				<el-row>
					<h3>可视化工具</h3>
					<el-button  type="primary" size="mini" @click="jump('https://echarts.baidu.com/')">ECharts</el-button>
					<el-button  type="primary" size="mini" @click="jump('https://threejs.docschina.org/')">threejs</el-button>
					<el-button  type="primary" size="mini" @click="jump('https://antv.vision/zh')">AntV</el-button>
				</el-row>
				<el-row>
					<br>
					<hr>
					<h3>图</h3>
					<a href="https://zhuanlan.zhihu.com/p/96982417" target="_blank">
						<img src="./../../assets/images/vue.jpg" alt="">
					</a>
					<a href="https://blog.csdn.net/weixin_42290927/article/details/94432587" target="_blank">
						<img src="./../../assets/images/structure.png" alt="">
					</a>
				</el-row>
				<el-row>

					<!-- 组件 -->
					<demo :childData="childData" style="border: 1px solid red;margin-bottom: 30px;">
						<h2>这是slot</h2>
						<template v-slot:content="slotProps">
							<h2>这是具名 插槽</h2>
							来⾃⼦组件数据：{{slotProps.testProps}}
						</template>
					</demo>
				</el-row>
			</div>
		</div>
	</div>
</template>

<script>
	import Demo from '@/pages/common/demo'
	console.info('=========================================================================== 这是 home页面');
	export default {
		// 允许组件递归调用自身，便于调试时显示更加友好的警告信息
		name: 'home',	
		
		//  组件注册
		components: {
			Demo
		},

		// 注册属性 "接收来自父组件的数据",
		props: {
			param: {
				type: String,
				default: "父组件"
			},
			params: {
				type: Number,
				// default: 0,
				// required: true,
				// validator: function (value) {
				// 	return value >= 0
				// }
			}
		},

		// "声明需要响应式绑定的数据对象",
		data() {
			return {
				name: null,
				age: 18,
				result: 10000,
				showResult: false,
				obj: {
					version: '1.0.0'
				},
				childData: '我是父组件传过来的数据'
			}
		},
		methods: {
			jump(url) {
				window.open(url);
			},
		},
		
		// 计算属性
		computed: {
			computedVal: {
				get: function() {},
				set: function() {}
			}		
		},

		// 侦听属性
		watch: {
			name: function(newVal, oldVal) {

			}
		},

		// *******************************************************************************  生命周期钩子
		// created 在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图
		created() {
           
		},
		//
		mounted() {
			console.warn('=========================================================================== 这是 home页面');
			sessionStorage.clear();
			this.showResult = !this.showResult;
		},
		// 实例销毁之前调用
		beforeDestroy() {

		},
		// *******************************************************************************  end: 生命周期钩子
	}
</script>

<style scoped>
	/* scoped 当前组件的样式不会修改其他地方的样式，使用了data-v-hash的方式，通过postcss实现的， */
	/* 穿透：stylus的样式穿透 使用>>>；sass和less的样式穿透 使用/deep/ */
</style>